/**
 * 组件：消息对话组件
 * @author:Colin3dmax
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    Keyboard,
} from 'react-native';
import Util from '../utils/util';
import MessageBuble from './comp.message-say-bubble'
import ImageButton from './../component/comp.image-button'
import InputBox from './../component/comp.input-box'
import VoiceBox from './../component/comp.voice-box'

class MessageInputPanel extends Component {

    static propTypes = {}

    static defaultProps = {}

    constructor(props) {
        super(props)
        this.state = {
            isKeyboardMode:true,
            isShowMore:false,
            position: 'absolute'
            
            
        }
    }

  
    componentWillMount () {
        this.keyboardWillShowListener =
          Keyboard.addListener('keyboardWillShow', this._keyboardWillShow);
        this.keyboardWillHideListener =
          Keyboard.addListener('keyboardWillHide', this._keyboardWillHide);
      }
    
      componentWillUnmount () {
        this.keyboardWillShowListener.remove();
        this.keyboardWillHideListener.remove();
      }
    
      _keyboardWillShow = () => {
        this.setState({
          position: 'relative'
        });
      }
    
      _keyboardWillHide = () => {
        this.setState({
          position: 'absolute'
        });
      }

    onPressSwitchButton=()=>{
        const {isKeyboardMode} = this.state
        this.setState({
            isKeyboardMode:!isKeyboardMode,
        });
    }

    genKeboardVoiceSwitchBtnUI(){
        const {isKeyboardMode} = this.state
        const btnVoiceSource = isKeyboardMode ? require('./../../img/btn_voice_message.png') : require('./../../img/btn_voice_message_keyboard.png')
        return (
            <ImageButton style={styles.btnVoice} source={btnVoiceSource} onPress={this.onPressSwitchButton}/>
        );
    }

    genInputVoiceBtnUI(){
        const {isKeyboardMode} = this.state
        if(isKeyboardMode){
            return (<InputBox />)
        }else{
            return (<VoiceBox />)
        }
    }

    onPressShowMore=()=>{
        const {isShowMore} = this.state;
        this.setState({
            isShowMore:!isShowMore,
        })
    }
    
    onPressShowEmoji(){

        //发送

    }

    genInputBarUI() {
        return (
            <View style={styles.inputBar}>
                {this.genKeboardVoiceSwitchBtnUI()}
                {this.genInputVoiceBtnUI()}
                <ImageButton style={styles.btnEmoji} source={require('./../../img/btn_emoji_stickers.png')} onPress={this.onPressShowEmoji}/>
                <ImageButton style={styles.btnShowMore} source={require('./../../img/btn_show_more.png')} onPress={this.onPressShowMore}/>
            </View>
        );
    }

    genMorePanelUI(){
        const {isShowMore} = this.state
        if(isShowMore){
            return (
                <View style={styles.showMorePanel}>

                </View>
            );
        }
    }

    render() {

        return (
            <View style={styles.container}>
                {this.genInputBarUI()}
                {this.genMorePanelUI()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        // borderWidth:1,
    },

    container: {
        borderTopWidth: StyleSheet.hairlineWidth,
        borderTopColor: '#b2b2b2',
        backgroundColor: '#FFFFFF',
        bottom: 0,
        width: Dimensions.get('window').width
      },
      primary: {
        flexDirection: 'row',
        alignItems: 'flex-end',
      },

      
    inputBar: {
        paddingTop:8,
        paddingBottom:8,
        backgroundColor: '#F5F5F7',
        flexDirection: 'row',
        alignItems: 'flex-end',
        paddingLeft:8,
        paddingRight:8,
        borderTopWidth:Util.getRealPixel(1),
        borderBottomWidth:Util.getRealPixel(1),
        borderTopColor:'#CBCBCC',
        borderBottomColor:'#DCDCDC',
        marginBottom:2,
    },
    btnImagePanel: {
        width: 33,
        height: 33,
        alignItems:'center',
        justifyContent:'center',
    },
    btnVoice:{
        marginRight:5,
    },
    btnEmoji: {
      marginLeft:5,
    },
    btnShowMore:{
        marginLeft:5,
    },
    showMorePanel:{
        height:255,
        backgroundColor:'#F4F4F6',

    },

});

export default MessageInputPanel;